{% extends "base.html" %}
{% block content %}
	<h2 class="mb-4">
		<span class="me-2">
			<img src="{{ url_for('static', filename='icons/calendar-date.svg') }}" class="bi" width="32" alt="">
		</span>
		Upcoming Events
	</h2>

	<div class="row">
    {% for event in events %}
		<div class="col-md-4">
        	<div class="card mb-4">
          		<img src="{{ event.thumbnail }}" class="card-img-top" alt="{{ event.title }}" width="300">
        		<div class="card-body">
            		<h5 class="card-title">{{ event.title }}</h5>
            		<p class="card-text">{{ event.date }} @ {{ event.time }} SLT</p>
            		{% if admin==True %}
            		<a href="{{ url_for('delete_event', event_id=event.id) }}" class="btn btn-sm btn-danger">Delete this event</a>
            		{% endif %}
            	</div>
            </div>
        </div>
    {% endfor %}
	</div><!-- {{ admin }} -->

	{% if admin==True %}
	<hr class="mt-3">
	<h4 class="my-2">Add Event (Admin Only)</h4>
	<form action="{{ url_for('add_event') }}" method="POST" enctype="multipart/form-data">
		<div class="mb-3">
			<label for="title" class="form-label">Event Title</label>
			<input class="form-control" type="text" id="title" name="title" placeholder="Title" required>
		</div>
		<div class="mb-3">
			<label for="date" class="form-label">Date</label>
			<input class="form-control" type="date" id="date" name="date" placeholder="YYYY-MM-DD" required>
		</div>
		<div class="mb-3">
			<label for="time" class="form-label">Time</label>
			<input class="form-control" type="" id="time" name="time" placeholder="HH:MM" required>
		</div>
		<div class="mb-3">
			<label for="thumbnail" class="form-label">Thumbnail Image</label>
			<input class="form-control" type="file" id="thumbnail" name="thumbnail" placeholder="Image Thumbnail" accept="image/*" required>
		</div>
		<div class="mb-3">
			<button class="btn btn-primary mt-2">Add Event</button>
		</div>
		</div>
	</form>
	{% endif %}
{% endblock %}
